<template lang="pug">
    ul.menu-c
        li.menu-item(v-for="(item, idx) in dataMenu" :key="idx" @mouseenter="onMouseEnter(idx)" @mouseleave="onMouseLeave(idx)")
            a.menu-link(href="javascript:void(0)")
                span.txt {{item.title}}
                i.fa.fa-chevron-right
</template>

<script lang="coffee">
export default {
    props:
        dataMenu:
            type: Array
            default: -> []
    methods:
        onMouseEnter: (idx) -> this.$emit('mouse-enter', idx)
        onMouseLeave: (idx) -> this.$emit('mouse-leave', idx)
}
</script>

<style scoped lang="stylus">
.menu-c
    min-width 235px
    margin 0
    padding 0
    list-style none
    padding 20px 0
    display flex
    flex-flow column
    height 100%
    // z-index 50
    box-sizing border-box
    background-color rgba(0,0,0,0.6)
    .menu-item
        height 42px
        padding 0 20px 0 25px
        &:hover
            background-color #ff6700
        .menu-link
            width 100%
            color #fefefe
            display flex
            justify-content space-between
            .fa-chevron-right
                color rgba(255,255,255,0.5)
        .menu-link .txt, .menu-link .fa-chevron-right
            display inline-block
            line-height 42px
</style>